<template>
  <div>
    <!-- 顶部搜索条 -->
    <div class="search">
      <div class="content">
        <icon type="search" size="14"></icon>
        <input type="text" v-model="kw" @confirm="searchEnter(kw)" />
      </div>
    </div>
    <!-- tab效果 -->
    <ul class="tab">
      <li
        :class="index == currentIndex ? 'active' : ''"
        v-for="(item, index) in tabs"
        :key="index"
        @click="handleTab(index)"
      >
        {{ item }}
      </li>
    </ul>
    <!-- 商品列表 -->
    <ul class="goods_list">
      <navigator
        :url="'/pages/goods_detail/main?gid=' + item.goods_id"
        class="list_item"
        :key="index"
        v-for="(item, index) in searchList"
      >
        <li>
          <img :src="item.goods_small_logo" alt="" />
          <div class="goods_right">
            <div class="goods_name">
              <h4>
                {{ item.goods_name }}
              </h4>
            </div>
            <div class="price">￥{{ item.goods_price }}</div>
          </div>
        </li>
      </navigator>
    </ul>
    <!-- 没有更多数据 -->
    <div class="more" v-if="hasMore">没有更多数据...</div>
  </div>
</template>

<script>
import request from "../../utils/request";
export default {
  data() {
    return {
      kw: "",
      tabs: ["综合", "销量", "价格"],
      currentIndex: 0,
      // 当前页码
      pagenum: 0,
      // 搜索列表
      searchList: [],
      // 商品（列表）总数
      total: 0,
      // 每页条数
      pagesize: 50,
      // 控制是否有没有更多数据的状态位
      hasMore: false, // 默认有更多数据
      // 控制接口调用频率
      isLoading: false,
      timer: null,
    };
  },
  onLoad(param) {
    // 通过param可以获取路由参数
    // '/pages/search_list/main?keyword=电视'
    console.log(param.keyword);
    this.kw = param.keyword;
    this.initData();
  },
  onReachBottom() {
    console.log(1234);
  },
  methods: {
    searchEnter(keyword) {
      // console.log(keyword);
      this.initData();
    },
    handleTab(index) {
      // console.log(index);
      this.currentIndex = index;
    },
    async initData() {
      // 调用后台数据
      const resList = await request("goods/search", {
        query: this.kw,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      // console.log(resList);
      this.searchList = resList.data.message.goods;
      this.total = resList.data.message.total;
      this.pagenum = resList.data.message.pagenum;
    },
  },
  methods: {
    searchEnter(keyword) {
      // console.log(keyword);
      this.initData();
    },
    handleTab(index) {
      // console.log(index);
      this.currentIndex = index;
    },
    async initData() {
      // 判断是否还有更多数据
      if (this.hasMore) {
        // 阻止继续调用接口
        // console.log("32");
        return;
      }
      // 当前请求是否正在进行
      if (this.isLoading) {
        //接口正在调用，但是后台还没有返回数据
        return;
      }
      this.isLoading = true;
      // 调用后台数据
      const resList = await request("goods/search", {
        query: this.kw,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      console.log(resList);
      // 更新页面数据（把新加载的数据累加到list列表中）
      this.searchList = [...this.searchList, ...resList.data.message.goods];
      this.total = resList.data.message.total;
      // console.log(this.searchList);

      // 后台已经返回数据，此时才允许再次发送请求
      this.isLoading = false;

      //如果列表的长度大于等于total,就表示没有更多数据了
      if (this.searchList.length >= this.total && this.total !== 0) {
        // 没有更多数据了
        this.hasMore = true;
      }
      // 加载下一页数据的时（修改当前页码）
      this.pagenum = parseInt(this.pagenum) + 1;
    },
  },
};
</script>

<style lang="less" scoped>
@import "./main.less";
</style>
